import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:hxdj/common/base_page/my_loading_page.dart';
import 'package:hxdj/common/components/my_clip_rect.dart';
import 'package:hxdj/common/components/my_scrollView.dart';
import 'package:hxdj/common/components/my_tap_widget.dart';
import 'package:hxdj/common/components/my_text.dart';
import 'package:hxdj/common/my_header_global.dart';
import 'package:hxdj/common/routers/navigator.dart';
import 'package:hxdj/home/address/select_address/select_address_page.dart';
import 'package:hxdj/home/order/order_create_viewmodel.dart';
import 'package:hxdj/home/select_technician/select_technician_page.dart';
import 'package:provider/provider.dart';

class OrderCreatePage extends StatefulWidget {
  static String routeName = "/OrderCreatePage";
  const OrderCreatePage({super.key});

  @override
  State<OrderCreatePage> createState() => _OrderCreatePageState();
}

class _OrderCreatePageState extends State<OrderCreatePage> {
  late OrderCreateViewModel? viewModel;

  @override
  void initState() {
    super.initState();
    viewModel = context.read<OrderCreateViewModel>();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      viewModel?.clean();
      viewModel?.requestData();
      viewModel?.context = context;
    });
  }

//操作区域
  _buildOperationArea() {
    return SafeArea(
      child: Container(
          alignment: Alignment.centerRight,
          decoration: const BoxDecoration(color: MyColours.materialBg, boxShadow: <BoxShadow>[
            BoxShadow(
              color: Color.fromRGBO(0, 0, 0, 0.05),
              offset: Offset(0.0, -13),
              blurRadius: 12.0,
              spreadRadius: -9.0,
            )
          ]),
          padding: EdgeInsets.only(top: 12.5.h, right: 15.w),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              //金额
              Container(
                padding: EdgeInsets.only(left: 15.w),
                child: Row(
                  children: [
                    MyText("合计：", color: MyColours.text, fontSize: 13.sp, fontWeight: FontWeight.w600),
                    MyText("¥${viewModel?.totalFee}",
                        color: MyColours.colorE33432, fontSize: 17.sp, fontWeight: FontWeight.w600),
                  ],
                ),
              ),
              const Spacer(),
              MyTapWidget(
                  onTap: () {
                    if (viewModel?.addressModel == null) {
                      EasyLoading.showToast("请选择服务地址");
                      return;
                    }
                    if (viewModel?.technicianModel == null) {
                      EasyLoading.showToast("请选择服务人员");
                      return;
                    }

                    if (viewModel!.serviceTime.isEmpty) {
                      EasyLoading.showToast("请选择服务时间");
                      return;
                    }
                    //下单
                    //选择支付方式
                    viewModel?.startSelectPay(viewModel?.totalFee ?? "");
                  },
                  child: MyBorder(
                    backgroundColor: MyColours.appMain,
                    color: MyColours.appMain,
                    radius: 20.h,
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 10.w),
                      child: Text(
                        "立即下单",
                        style: TextStyle(color: MyColours.materialBg, fontSize: 14.sp, fontWeight: FontWeight.w700),
                      ),
                    ),
                  )),
            ],
          )),
    );
  }

  _buildOrderAddress() {
    return MyTapWidget(
      onTap: () {
        //选择地址
        NavigatorUtils.pushParams(context, "${SelectAddressPage.routeName}?form=order");
      },
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 10.w, vertical: 15.h),
        child: MyBorder(
          backgroundColor: MyColours.materialBg,
          radius: 12.5.h,
          child: viewModel?.addressModel == null
              ? Container(
                  padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 15.h),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      MyText("请选择服务地址", textStyle: MyTextStyles.textBlackBold14),
                      MyImage(imageName: "ic_arrow_right", width: 5.w, height: 8.h)
                    ],
                  ),
                )
              : Row(
                  children: [
                    // 有地址, 无地址, 图标, 大小 坐标不一样 一个小图标
                    Container(
                        padding: EdgeInsets.only(left: 25.w), child: MyImage(imageName: "ic_un_address", width: 20.w)),
                    //地址信息
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          //地址
                          Padding(
                            padding: EdgeInsets.only(
                              left: 12.w,
                              right: 12.w,
                              bottom: 5.w,
                              top: 20.w,
                            ),
                            child: Text(
                                (viewModel?.addressModel?.address ?? "") +
                                    (viewModel?.addressModel?.addressDetail ?? ""),
                                style: const TextStyle(fontSize: 15, color: Colors.black, height: 1.8)),
                          ),

                          //名字, 手机号
                          Container(
                            padding: EdgeInsets.only(left: 12.w, bottom: 20.w),
                            child: Row(
                              children: [
                                //名字
                                MyText(viewModel?.addressModel?.contacts ?? "", textStyle: MyTextStyles.textBold14),
                                Padding(
                                  padding: EdgeInsets.only(left: 8.w),
                                  child:
                                      MyText(viewModel?.addressModel?.mobile ?? "", textStyle: MyTextStyles.textBold14),
                                ),
                                //电话
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),

                    Container(
                        padding: const EdgeInsets.only(right: 15),
                        child: const MyImage(
                          imageName: "ic_arrow_right",
                          width: 6,
                          height: 9,
                        )),
                  ],
                ),
        ),
      ),
    );
  }

  _buildOrderDetail() {
    return Container(
        decoration: BoxDecoration(
          color: MyColours.materialBg,
          //设置四周圆角 角度
          borderRadius: BorderRadius.circular(17.w),
        ),
        margin: EdgeInsets.only(left: 10.w, right: 10.w),
        padding: EdgeInsets.only(top: 10.h, bottom: 15.h, left: 10.w, right: 10.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MyClipRect(imageUrl: viewModel?.detailModel.coverImg ?? "", width: 50.w, height: 50.w, radius: 5.w),
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(left: 8.5.w),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Padding(
                              padding: EdgeInsets.only(right: 5.w),
                              child: MyText(viewModel?.detailModel.title ?? "", textStyle: MyTextStyles.textBlack14),
                            ),
                            MyText("x1", color: MyColours.textGray, fontSize: 14.sp),
                          ],
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: 15.h),
                          child: MyText("¥${viewModel?.detailModel.price ?? ""}",
                              color: MyColours.colorE33432, fontSize: 15.sp, fontWeight: FontWeight.w600),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Container(
                padding: EdgeInsets.only(top: 6.5.h, bottom: 15.h),
                child: MyTapWidget(
                  onTap: () {
                    //选择服务人员
                    NavigatorUtils.push(
                        context, "${SelectTechnicianPage.routeName}?tId=${viewModel?.technicianModel?.tId ?? ""}");
                  },
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      MyText("服务人员", textStyle: MyTextStyles.textBlack14),
                      const Spacer(),
                      viewModel?.technicianModel == null
                          ? Row(
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(right: 5.w),
                                  child: MyText("请选择服务人员", fontSize: 14.sp, color: MyColours.textGray),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(left: 6.w),
                                  child: MyImage(imageName: "ic_arrow_right", width: 5.w, height: 9.h),
                                ),
                              ],
                            )
                          : Row(
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(right: 5.w),
                                  child: MyText(viewModel?.technicianModel?.name ?? "",
                                      textStyle: MyTextStyles.textBlackBold14),
                                ),
                                MyClipRect(
                                    imageUrl: viewModel?.technicianModel?.logo ?? "",
                                    width: 30.w,
                                    height: 30.w,
                                    radius: 15.w),
                                Padding(
                                  padding: EdgeInsets.only(left: 6.w),
                                  child: MyImage(imageName: "ic_arrow_right", width: 5.w, height: 9.h),
                                ),
                              ],
                            )
                    ],
                  ),
                )),
            Container(
                padding: EdgeInsets.only(bottom: 15.h, top: 10.h),
                child: MyTapWidget(
                  onTap: () {
                    //选择服务时间
                    viewModel?.selectServiceTime();
                  },
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      MyText("服务时间", textStyle: MyTextStyles.textBlack14),
                      const Spacer(),
                      Padding(
                        padding: EdgeInsets.only(right: 5.w),
                        child: MyText(viewModel!.serviceTime.isNotEmpty ? viewModel!.serviceTime : "请选择服务时间",
                            color: viewModel!.serviceTime.isNotEmpty ? MyColours.appMain : MyColours.textGray,
                            fontSize: 14.sp,
                            fontWeight: viewModel!.serviceTime.isNotEmpty ? FontWeight.w700 : FontWeight.w400),
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 6.w),
                        child: MyImage(imageName: "ic_arrow_right", width: 5.w, height: 9.h),
                      ),
                    ],
                  ),
                )),
            Container(
                padding: EdgeInsets.only(top: 10.h),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    MyText("预估路费", textStyle: MyTextStyles.textBlack14),
                    const Spacer(),
                    Padding(
                      padding: EdgeInsets.only(right: 5.w),
                      child: MyText(viewModel!.roadFee.isNotEmpty ? "¥${viewModel!.roadFee}" : "请选择复地址服务地址和服务时间",
                          color: viewModel!.roadFee.isNotEmpty ? MyColours.textBlack : MyColours.textGray,
                          fontSize: 14.sp),
                    ),
                  ],
                )),
          ],
        ));
  }

  //主题区域
  _buildBody() {
    switch (viewModel?.state) {
      case ViewState.loading:
        return const MyLoadingWidget();

      default:
        return MyScrollView(
          crossAxisAlignment: CrossAxisAlignment.start,
          bottomButton: _buildOperationArea(),
          children: [
            //订单地址
            _buildOrderAddress(),
            //订单详情
            _buildOrderDetail(),
          ],
        );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<OrderCreateViewModel>(builder: (context, model, child) {
      return Scaffold(backgroundColor: MyColours.materialBg, appBar: const MyAppBar(title: "订单信息"), body: _buildBody());
    });
  }
}
